<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>부트스트랩 기초-구성요소1</title>
    <meta name="description" content="" />
    <meta name="author" content="" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    <link rel="stylesheet" href="css/font-awesome.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    
    
    <!--[if IE 7]>
      <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">부트스트랩 기초 배우기</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class=""><a href="hero1-begin.html">구조</a></li>
              <li class=""><a href="hero2-begin.html">기본 CSS</a></li>
              <li class="active"><a href="hero3-begin.html">구성요소1</a></li>
              <li class=""><a href="hero4-begin.html">구성요소2</a></li>
              <li class=""><a href="hero5-begin.html">자바스크립트</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

        <!-- Main hero unit for a primary marketing message or call to action -->
        <div class="hero-unit">
            <h1>안녕하세요!</h1>
            <p>부트스트랩 기초 배우기입니다.</p>
            <h2>부트스트랩 기초-구성요소1</h2>
            <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
        </div>

        <!-- Example row of columns -->
        <div class="row">
            <div class="span12">
                <hr>
                <h4>드랍다운 메뉴의 기본 형태</h4>
                <div class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <li><a href="#" tabindex="-1">Action</a></li>
                        <li><a href="#" tabindex="-1">Another Action</a></li>
                        <li><a href="#" tabindex="-1">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#" tabindex="-1">Separated link</a></li>
                        <li class="dropdown-submenu">
                            <a href="#" tabindex="-1">More options</a>
                            <ul class="dropdown-menu">
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <hr>
                <h4>서브 메뉴-드랍업</h4>
                <div class="dropup">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropup <b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                        <li><a href="#" tabindex="-1">Action</a></li>
                        <li><a href="#" tabindex="-1">Another Action</a></li>
                        <li><a href="#" tabindex="-1">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-submenu">
                            <a href="#" tabindex="-1">More options</a>
                            <ul class="dropdown-menu">
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <hr>
                <h4>서브 메뉴 좌측</h4>
                <div class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                        <li><a href="#" tabindex="-1">Action</a></li>
                        <li><a href="#" tabindex="-1">Another Action</a></li>
                        <li><a href="#" tabindex="-1">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#" tabindex="-1">Separated link</a></li>
                        <li class="dropdown-submenu pull-left">
                            <a href="#" tabindex="-1">More options</a>
                            <ul class="dropdown-menu">
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <hr>
                <h4>버튼 그룹</h4>
                <div class="btn-group">
                    <button class="btn">1</button>
                    <button class="btn">2</button>
                    <button class="btn">3</button>
                </div>
                <div class="btn-toolbar">
                    <div class="btn-group">
                        <button class="btn">1</button>
                        <button class="btn">2</button>
                        <button class="btn">3</button>
                        <button class="btn">4</button>
                    </div>
                    <div class="btn-group">
                        <button class="btn">5</button>
                        <button class="btn">6</button>
                        <button class="btn">7</button>
                    </div>
                    <div class="btn-group">
                        <button class="btn">8</button>
                    </div>
                </div>
                <hr>
                <h4>세로형 버튼 그룹</h4>
                <div class="btn-group btn-group-vertical">
                    <button type="button" class="btn"><i class="icon-align-left"></i></button>
                    <button type="button" class="btn"><i class="icon-align-center"></i></button>
                    <button type="button" class="btn"><i class="icon-align-right"></i></button>
                    <button type="button" class="btn"><i class="icon-align-justify"></i></button>
                </div>
                <hr>
                <h4>버튼의 드랍다운 메뉴</h4>
                <div class="btn-group">
                    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <hr>
                <h4>버튼의 크기</h4>
                <div class="btn-toolbar">
                    <div class="btn-group">
                        <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">Large button <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                    <div class="btn-group">
                        <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Small button <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                    <div class="btn-group">
                        <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Mini button <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                </div>
                <hr>
                <h4>버튼의 텍스트와 아이콘의 분리</h4>
                <div class="btn-group">
                    <button class="btn btn-warning">Warning</button>
                    <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button class="btn btn-warning dropdown-toggle right-icon-split" data-toggle="dropdown">Home</button>
                    <button class="btn btn-warning dropdown-toggle"><i class="icon-home"></i></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button class="btn btn-warning"><i class="icon-home"></i></button>
                    <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Home</button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <hr>
                <h4>버튼의 드랍업 서브 메뉴</h4>
                <div class="btn-group dropup">
                    <button class="btn">Dropup</button>
                    <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <div class="btn-group dropup">
                    <button class="btn primary">Right dropup</button>
                    <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                    <ul class="dropdown-menu pull-right">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <hr>
                <h4>내비게이션 탭</h4>
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
                    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
                    <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active fade in" id="tab1">
                        <p>I'm in Section 1.</p>
                    </div>
                    <div class="tab-pane fade" id="tab2">
                        <p>Howdy, I'm in Section 2.</p>
                    </div>
                    <div class="tab-pane fade" id="tab3">
                        <p>What up girl, this is Section 3.</p>
                    </div>
                </div>
                <hr>
                <h4>탭을 하단으로 배치</h4>
                <div class="tabbable tabs-below">
                    <div class="tab-content">
                        <div class="tab-pane active" id="A">
                            <p>I'm in Section A.</p>
                        </div>
                        <div class="tab-pane" id="B">
                            <p>Howdy, I'm in Section B.</p>
                        </div>
                        <div class="tab-pane" id="C">
                            <p>What up girl, I'm in Section C.</p>
                        </div>
                    </div>
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#A" data-toggle="tab">Section</a></li>
                        <li><a href="#B" data-toggle="tab">Section 2</a></li>
                        <li><a href="#C" data-toggle="tab">Section 3</a></li>
                    </ul>                    
                </div>
                <hr>
                <h4>탭을 좌측에 배치</h4>
                <div class="tabbable tabs-left">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
                        <li><a href="#lB" data-toggle="tab">Section 2</a></li>
                        <li><a href="#lC" data-toggle="tab">Section 3</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="lA">
                            <p>I'm in Section A.</p>
                        </div>
                        <div class="tab-pane" id="lB">
                            <p>Howdy, I'm in Section B.</p>
                        </div>
                        <div class="tab-pane" id="lC">
                            <p>What up girl, I'm in Section C.</p>
                        </div>
                    </div>
                </div>
                <hr>
                <h4>탭을 우측에 배치</h4>
                <div class="tabbable tabs-right">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
                        <li><a href="#rB" data-toggle="tab">Section 2</a></li>
                        <li><a href="#rC" data-toggle="tab">Section 3</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="rA">
                            <p>I'm in Section A.</p>
                        </div>
                        <div class="tab-pane" id="rB">
                            <p>Howdy, I'm in Section B.</p>
                        </div>
                        <div class="tab-pane" id="rC">
                            <p>What up girl, I'm in Section C.</p>
                        </div>
                    </div>
                </div>
                <hr>
                <h4>세로형 탭</h4>
                <ul class="nav nav-tabs nav-stacked">
                    <li class="active"><a href="#tab1s" data-toggle="tab">Section 1</a></li>
                    <li><a href="#tab2s" data-toggle="tab">Section 2</a></li>
                    <li><a href="#tab3s" data-toggle="tab">Section 3</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active fade in" id="tab1s">
                        <p>I'm in Section 1.</p>
                    </div>
                    <div class="tab-pane fade" id="tab2s">
                        <p>Howdy, I'm in Section 2.</p>
                    </div>
                    <div class="tab-pane fade" id="tab3s">
                        <p>What up girl, this is Section 3.</p>
                    </div>
                </div>
                <hr>
                <h4>탭과 드랍다운 메뉴</h4>
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab-d1" data-toggle="tab">Home</a></li>
                    <li><a href="#tab-d2" data-toggle="tab">Help</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#tab-d3" data-toggle="tab">drop-down A</a></li>
                            <li><a href="#tab-d4" data-toggle="tab">drop-down B</a></li>
                            <li><a href="#tab-d5" data-toggle="tab">drop-down C</a></li>
                            <li class="divider"></li>
                            <li><a href="#tab-d6" data-toggle="tab">drop-down D</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab-d1">
                        <p>I'm in Section A.</p>
                    </div>
                    <div class="tab-pane" id="tab-d2">
                        <p>Howdy, I'm in Section B.</p>
                    </div>
                    <div class="tab-pane" id="tab-d3">
                        <p>What up girl, this is drop-down A.</p>
                    </div>
                    <div class="tab-pane" id="tab-d4">
                        <p>I'm in drop-down B.</p>
                    </div>
                    <div class="tab-pane" id="tab-d5">
                        <p>Howdy, I'm in drop-down C.</p>
                    </div>
                    <div class="tab-pane" id="tab-d6">
                        <p>What up girl, this is drop-down D.</p>
                    </div>
                </div>
                <hr>
                <h4>필(Pills)</h4>
                <ul class="nav nav-pills">
                    <li class="active"><a href="#tab1p" data-toggle="pill">Section 1</a></li>
                    <li><a href="#tab2p" data-toggle="pill">Section 2</a></li>
                    <li><a href="#tab3p" data-toggle="pill">Section 3</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active fade in" id="tab1p">
                        <p>I'm in Section 1.</p>
                    </div>
                    <div class="tab-pane fade" id="tab2p">
                        <p>Howdy, I'm in Section 2.</p>
                    </div>
                    <div class="tab-pane fade" id="tab3p">
                        <p>What up girl, this is Section 3.</p>
                    </div>
                </div>
                <hr>
                <h4>필 하단배치</h4>
                <div class="tabbable pills-below">
                    <div class="tab-content">
                        <div class="tab-pane active" id="Ap">
                            <p>I'm in Section A.</p>
                        </div>
                        <div class="tab-pane" id="Bp">
                            <p>Howdy, I'm in Section B.</p>
                        </div>
                        <div class="tab-pane" id="Cp">
                            <p>What up girl, this is Section C.</p>
                        </div>
                    </div>
                    <ul class="nav nav-pills">
                        <li class="active"><a href="#Ap" data-toggle="pill">Section 1</a></li>
                        <li class=""><a href="#Bp" data-toggle="pill">Section 2</a></li>
                        <li class=""><a href="#Cp" data-toggle="pill">Section 3</a></li>
                    </ul>
                </div> 
                <hr>
                <h4>필 좌측 배치 - 지원안됨(상단배치로 표현됨)</h4>
                <div class="tabbable pills-left">
                    <ul class="nav nav-pills">
                        <li class=""><a href="#lAp" data-toggle="pill">Section 1</a></li>
                        <li class=""><a href="#lBp" data-toggle="pill">Section 2</a></li>
                        <li class="active"><a href="#lCp" data-toggle="pill">Section 3</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane" id="lAp">
                            <p>I'm in Section A.</p>
                        </div>
                        <div class="tab-pane" id="lBp">
                            <p>Howdy, I'm in Section B.</p>
                        </div>
                        <div class="tab-pane active" id="lCp">
                            <p>What up girl, this is Section C.</p>
                        </div>
                    </div>
                </div>
                <hr>
                <h4>필 우측 배치 - 지원안됨(상단배치로 표현됨)</h4>
                <div class="tabbable pills-right">
                    <ul class="nav nav-pills">
                        <li class="active"><a href="#rAp" data-toggle="pill">Section 1</a></li>
                        <li><a href="#rBp" data-toggle="pill">Section 2</a></li>
                        <li><a href="#rCp" data-toggle="pill">Section 3</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="rAp">
                            <p>I'm in Section A.</p>
                        </div>
                        <div class="tab-pane" id="rBp">
                            <p>Howdy, I'm in Section B.</p>
                        </div>
                        <div class="tab-pane" id="rCp">
                            <p>What up girl, this is Section C.</p>
                        </div>
                    </div>
                </div>
                <hr>
                <h4>세로형</h4>
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#tab1sp" data-toggle="pill">Section 1</a></li>
                    <li><a href="#tab2sp" data-toggle="pill">Section 2</a></li>
                    <li><a href="#tab3sp" data-toggle="pill">Section 3</a></li>
                </ul>  
                <div class="tab-content">
                    <div class="tab-pane active fade in" id="tab1sp">
                        <p>I'm in Section 1.</p>
                    </div>
                    <div class="tab-pane fade" id="tab2sp">
                        <p>Howdy, I'm in Section 2.</p>
                    </div>
                    <div class="tab-pane fade" id="tab3sp">
                        <p>What up girl, this is Section 3.</p>
                    </div>
                </div> 
                <hr>
                <h4>필과 드랍다운</h4>
                <ul class="nav nav-pills">
                    <li class="active"><a href="#tab-d1p" data-toggle="pill">Home</a></li>
                    <li><a href="#tab-d2p" data-toggle="pill">Help</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#tab-d3p" data-toggle="pill">drop-down A</a></li>
                            <li><a href="#tab-d4p" data-toggle="pill">drop-down B</a></li>
                            <li><a href="#tab-d5p" data-toggle="pill">drop-down C</a></li>
                            <li class="divider"></li>
                            <li><a href="#tab-d6p" data-toggle="pill">drop-down D</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab-d1p">
                        <p>I'm in Section A.</p>
                    </div>
                    <div class="tab-pane" id="tab-d2p">
                        <p>Howdy, I'm in Section B.</p>
                    </div>
                    <div class="tab-pane" id="tab-d3p">
                        <p>What up girl, this is drop-down A.</p>
                    </div>
                    <div class="tab-pane" id="tab-d4p">
                        <p>I'm in drop-down B.</p>
                    </div>
                    <div class="tab-pane" id="tab-d5p">
                        <p>Howdy, I'm in drop-down C.</p>
                    </div>
                    <div class="tab-pane" id="tab-d6p">
                        <p>What up girl, this is drop-down D.</p>
                    </div>
                </div>
                <hr>
                <h4>리스트(List)</h4>
                <ul class="nav nav-list">
                    <li class="active"><a href="#tab1l" data-toggle="tab">Section 1</a></li>
                    <li><a href="#tab2l" data-toggle="tab">Section 2</a></li>
                    <li><a href="#tab3l" data-toggle="tab">Section 3</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active fade in" id="tab1l">
                        <p>I'm in Section 1.</p>
                    </div>
                    <div class="tab-pane fade" id="tab2l">
                        <p>Howdy, I'm in Section 2.</p>
                    </div>
                    <div class="tab-pane fade" id="tab3l">
                        <p>What up girl, this is Section 3.</p>
                    </div>
                </div>
                <hr>
                <h4>리스트 하단배치</h4>
                <div class="tabbable list-below">
                    <div class="tab-content">
                        <div class="tab-pane active" id="Al">
                            <p>I'm in Section A.</p>
                        </div>
                        <div class="tab-pane" id="Bl">
                            <p>Howdy, I'm in Section B.</p>
                        </div>
                        <div class="tab-pane" id="Cl">
                            <p>What up girl, this is Section C.</p>
                        </div>
                    </div>
                    <ul class="nav nav-list">
                        <li class="active"><a href="#Al" data-toggle="tab">Section 1</a></li>
                        <li class=""><a href="#Bl" data-toggle="tab">Section 2</a></li>
                        <li class=""><a href="#Cl" data-toggle="tab">Section 3</a></li>
                    </ul>
                </div> 
                <hr>
                <h4>리스트 좌측 배치 - 지원안됨(상단배치로 표현됨)</h4>
                <div class="tabbable list-left">
                    <ul class="nav nav-list">
                        <li class=""><a href="#lAl" data-toggle="tab">Section 1</a></li>
                        <li class=""><a href="#lBl" data-toggle="tab">Section 2</a></li>
                        <li class="active"><a href="#lCl" data-toggle="tab">Section 3</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane" id="lAl">
                            <p>I'm in Section A.</p>
                        </div>
                        <div class="tab-pane" id="lBl">
                            <p>Howdy, I'm in Section B.</p>
                        </div>
                        <div class="tab-pane active" id="lCl">
                            <p>What up girl, this is Section C.</p>
                        </div>
                    </div>
                </div>
                <hr>
                <h4>리스트 우측 배치 - 지원안됨(상단배치로 표현됨)</h4>
                <div class="tabbable list-right">
                    <ul class="nav nav-list">
                        <li class="active"><a href="#rAl" data-toggle="tab">Section 1</a></li>
                        <li><a href="#rBl" data-toggle="tab">Section 2</a></li>
                        <li><a href="#rCl" data-toggle="tab">Section 3</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="rAl">
                            <p>I'm in Section A.</p>
                        </div>
                        <div class="tab-pane" id="rBl">
                            <p>Howdy, I'm in Section B.</p>
                        </div>
                        <div class="tab-pane" id="rCl">
                            <p>What up girl, this is Section C.</p>
                        </div>
                    </div>
                </div>
                <hr>
                <h4>세로형</h4>
                <ul class="nav nav-list nav-stacked">
                    <li class="active"><a href="#tab1sl" data-toggle="tab">Section 1</a></li>
                    <li><a href="#tab2sl" data-toggle="tab">Section 2</a></li>
                    <li><a href="#tab3sl" data-toggle="tab">Section 3</a></li>
                </ul>  
                <div class="tab-content">
                    <div class="tab-pane active fade in" id="tab1sl">
                        <p>I'm in Section 1.</p>
                    </div>
                    <div class="tab-pane fade" id="tab2sl">
                        <p>Howdy, I'm in Section 2.</p>
                    </div>
                    <div class="tab-pane fade" id="tab3sl">
                        <p>What up girl, this is Section 3.</p>
                    </div>
                </div> 
                <hr>
                <h4>리스트와 드랍다운</h4>
                <ul class="nav nav-list">
                    <li class="nav-header">List header</li>
                    <li class="active"><a href="#tab-d1l" data-toggle="tab">Home</a></li>
                    <li><a href="#tab-d2l" data-toggle="tab">Help</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#tab-d3l" data-toggle="tab">drop-down A</a></li>
                            <li><a href="#tab-d4l" data-toggle="tab">drop-down B</a></li>
                            <li><a href="#tab-d5l" data-toggle="tab">drop-down C</a></li>
                            <li class="divider"></li>
                            <li><a href="#tab-d6l" data-toggle="tab">drop-down D</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab-d1l">
                        <p>I'm in Section A.</p>
                    </div>
                    <div class="tab-pane" id="tab-d2l">
                        <p>Howdy, I'm in Section B.</p>
                    </div>
                    <div class="tab-pane" id="tab-d3l">
                        <p>What up girl, this is drop-down A.</p>
                    </div>
                    <div class="tab-pane" id="tab-d4l">
                        <p>I'm in drop-down B.</p>
                    </div>
                    <div class="tab-pane" id="tab-d5l">
                        <p>Howdy, I'm in drop-down C.</p>
                    </div>
                    <div class="tab-pane" id="tab-d6l">
                        <p>What up girl, this is drop-down D.</p>
                    </div>
                </div>
                <hr>
                <h4>내비게이션 바의 기본 형태</h4>
                <div class="navbar">
                    <div class="navbar-inner">
                        <a class="brand" href="#">Title</a>
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                    </div>
                </div>
                <hr>
                <h4>세로 분리자</h4>
                <div class="navbar">
                    <div class="navbar-inner">
                        <a class="brand" href="#">Title</a>
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">Link</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                    </div>
                </div>
                <hr>
                <h4>검색폼 추가</h4>
                <div class="navbar">
                    <div class="navbar-inner">
                        <a class="brand" href="#">Title</a>
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">Link</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                        <form class="navbar-form pull-right">
                            <input type="text" class="span2">
                            <button type="submit" class="btn">Submit</button>
                        </form>
                    </div>
                </div>
                <hr>
                <h4>검색폼의 변경</h4>
                <div class="navbar">
                    <div class="navbar-inner">
                        <a class="brand" href="#">Title</a>
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">Link</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                        <form class="navbar-form pull-right">
                            <input type="text" class="span2 search-query" placeholder="Search">
                            <button type="submit" class="btn">Submit</button>
                        </form>
                    </div>
                </div>
                <hr>
                <h4>드랍다운메뉴 추가</h4>
                <div class="navbar">
                    <div class="navbar-inner">
                        <a class="brand" href="#">Title</a>
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">Link</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">Link</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </li>
                        </ul>
                        <form class="navbar-form pull-right">
                            <input type="text" class="span2 search-query" placeholder="Search">
                            <button type="submit" class="btn">Submit</button>
                        </form>
                    </div>
                </div>
                <hr>
                <h4>메뉴바의 상단/하단 고정</h4> navbar navbar-fixed-top 선택자 변경(첨부파일 navbar-fixed.html 참고).
                <div class="navbar">
                    <div class="navbar-inner">
                        <a class="brand" href="#">Title</a>
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">Link</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">Link</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </li>
                        </ul>
                        <form class="navbar-form pull-right">
                            <input type="text" class="span2 search-query" placeholder="Search">
                            <button type="submit" class="btn">Submit</button>
                        </form>
                        <ul class="nav pull-right">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <hr>
                <h4>반응형 내비게이션 바</h4>
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </a>
                            <a class="brand" href="#">Title</a>
                            <div class="nav-collapse collapse">
                                <ul class="nav">
                                    <li class="active"><a href="#">Home</a></li>
                                    <li class="divider-vertical"></li>
                                    <li><a href="#">Link</a></li>
                                    <li class="divider-vertical"></li>
                                    <li><a href="#">Link</a></li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                        </ul>
                                    </li>
                                </ul>
                                <form class="navbar-form pull-right">
                                    <input type="text" class="span2 search-query" placeholder="Search">
                                    <button type="submit" class="btn">Submit</button>
                                </form>
                                <ul class="nav pull-right">
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <h4>메뉴바의 색상 반전</h4>
                <div class="navbar navbar-inverse">
                    <div class="navbar-inner">
                        <div class="container">
                            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </a>
                            <a class="brand" href="#">Title</a>
                            <div class="nav-collapse collapse">
                                <ul class="nav">
                                    <li class="active"><a href="#">Home</a></li>
                                    <li class="divider-vertical"></li>
                                    <li><a href="#">Link</a></li>
                                    <li class="divider-vertical"></li>
                                    <li><a href="#">Link</a></li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                        </ul>
                                    </li>
                                </ul>
                                <form class="navbar-form pull-right">
                                    <input type="text" class="span2 search-query" placeholder="Search">
                                    <button type="submit" class="btn">Submit</button>
                                </form>
                                <ul class="nav pull-right">
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
            </div>
        </div>

       
        <div style="height:200px;"></div>
        <hr>
        <footer>
            <p>&copy; Company 2012</p>
        </footer>

    </div> <!-- /container -->

     <script src="js/holder.js"></script>

  </body>
</html>
